<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../styles/analysis.css">
    <link rel="stylesheet" href="../../styles/common.css">
    <script src="../../libs/jquery.js"></script>
    <script src="../../scripts/config.js"></script>
    <script src="../../scripts/common.js"></script>
    <script src="../../scripts/app_bio_analysis.js"></script>

</head>
<body style="margin: 20px;">
    <div id="app">
        <div>
            <div  class="basicAnalysis">
                <div  class="mainProcess">
                    <div  class="description">
                        <h4 style= "margin:0 0 10px 0;font-size: 14px;">基本分析</h4>
                        <p style="padding-bottom:20px;border-bottom: 1px solid #dfe6ec;">
                            基本分析支持用户自定义参数进行分析。可自定义微生物多样性基本分析的主要参数，包括“综合选项”、“原始数据导入”、“样品数据合并”，“扩增子类型”、“样品分组信息”等五个参数模块 ，填写并确认参数信息后点击“提交”即可运行该项目基本分析，可在“总览/我的项目”或 “总览/我的任务”中查看。
                            <br>
                            <strong>论文引用：</strong>
                            如果您在数据分析过程中使用了百迈客云平台或者获得了其他有效帮助，我们期望您在论文发表时提及我们，感谢您对我们的支持和鼓励。引用参考：
                            <br>
                            1) XXX analysis was performed using BMKCloud (www.biocloud.net).<br>
                            2) We performed XXX analysis using XXX tools on the platform BMKCloud (www.biocloud.net).
                        </p>
                    </div>
                    <div  class="project m-t-md el-row" style="padding: 20px 0;margin-top: 20px;">
                        <div class="clear-fix">
                            <label  class="pull-left title_name" style="float:left;line-height:31px;margin: 0px 10px;font-weight: 700;">项目名称
                                <i  class="fa fa-question-circle question-icon el-tooltip"  tabindex="0">
                                </i>
                            </label>
                            <div  class="pull-left" style="float:left;">
                                <div  style="position:relative;width:400px;">
                                    <input id="project-name" placeholder="请输入项目名称" class="el-input__inner">
                                    <div  class="error" style="display: none;">
                                    </div>
                                </div>
                            </div>
                            <div  class="el-select pull-right history-box"
                                 style="display: inline-block;position: relative;float: right;width: 450px;">
                                <div class="el-input el-input--suffix" style="position:relative;"><!---->
                                    <input type="text" readonly="readonly" autocomplete="off" placeholder="使用历史参数" class="el-input__inner"
                                        style="padding-right: 30px;"><!---->
                                    <span class="el-input__suffix" style="position: absolute;
                                        top: 0;
                                        -webkit-transition: all .3s;
                                        height: 100%;
                                        color: #c0c4cc;
                                        text-align: center;    right: 5px;
                                        transition: all .3s;">
                                        <span class="el-input__suffix-inner"
                                              style="color: #c0c4cc;text-align: center;">
                                            <i class="el-select__caret el-input__icon el-icon-arrow-up"
                                               style="border-right: 0;">
                                            </i>
                                            <!---->
                                        </span><!---->
                                    </span><!---->
                                </div>
                            </div>
                        </div>
                        <div  class="el-dialog__wrapper create-project__dialog" style="display: none;">
                            <div class="el-dialog" style="width: 30%; margin-top: 15vh;">
                                <div class="el-dialog__header">
                                    <span class="el-dialog__title">新建项目</span>
                                    <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                                        <i class="el-dialog__close el-icon el-icon-close"></i>
                                    </button>
                                </div><!---->
                                <div class="el-dialog__footer">
                                    <span  class="dialog-footer">
                                        <div  class="error" style="float: left; display: none;">

                                        </div>
                                        <button  type="button" class="el-button cancel-btn el-button--default el-button--mini">
                                            <!----><!---->
                                            <span>取消</span>
                                        </button>
                                        <button  type="button" class="el-button confirm-btn el-button--primary el-button--mini">
                                            <!----><!---->
                                            <span>确定</span>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div  class="el-collapse m-b-md"
                          style="border-top: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5; margin: 20px 0px; padding: 10px 0px;">

                        <!--参数项 1-->
                        <div class="el-collapse-item">
                            <div role="tab" >
                                <div role="button" id="el-collapse-head-p1" tabindex="0" class="el-collapse-item__header" onclick="onclick_header('p1')">
                                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                                    参数1：分析项目类型（扩展子类型）
                                </div>
                            </div>
                            <div role="tabpanel"  class="el-collapse-item__wrap" style="display:none;">
                                <div class="el-collapse-item__content" style="padding: 10px;">
                                    <input type="radio" name="param1" id="16s" value="16s" checked><label for="16s">16s rDNA</label>
                                    <input type="radio" name="param1" id="18s" value="18s"><label for="18s">18s rDNA</label>
                                    <input type="radio" name="param1" id="ITS" value="ITS"><label for="ITS">ITS rDNA</label>
                                    <input type="radio" name="param1" id="古菌" value="古菌" style="display:none">
                                    <label for="古菌" style="display:none">古菌 rDNA</label>
                                    <br>
                                    <label>选择测试区域：</label>
                                    <div id="param-16s" style="display: none">
                                        <input type="radio" name="param1-16s" id="16s-0" value="V3+V4" checked><label for="16s-0">V3+V4</label>
                                        <input type="radio" name="param1-16s" id="16s-1" value="V4+V5"><label for="16s-1">V4+V5</label>
                                    </div>
                                    <div id="param-18s" style="display: none">
                                        <input type="radio" name="param1-18s" id="18s-0" value="V4" checked><label for="18s-0">V4</label>
                                    </div>
                                    <div id="param-ITS" style="display: none">
                                        <input type="radio" name="param1-ITS" id="ITS-0" value="ITS1" checked><label for="ITS-0">ITS1</label>
                                        <input type="radio" name="param1-ITS" id="ITS-1" value="ITS2"><label for="ITS-1">ITS2</label>
                                    </div>
                                    <div id="param-古菌" style="display: none">
                                        <input type="radio" name="param1-古菌" id="古菌-0" value="V3+V4" checked><label for="古菌-0">V3+V4</label>
                                        <input type="radio" name="param1-古菌" id="古菌-1" value="V4+V5"><label for="古菌-1">V4+V5</label>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!--参数项 2-->
                        <div class="el-collapse-item">
                            <div role="tab" >
                                <div role="button" id="el-collapse-head-p2" tabindex="0" class="el-collapse-item__header" onclick="onclick_header('p2')">
                                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                                    参数2：数据类型
                                </div>
                            </div>
                            <div role="tabpanel"  class="el-collapse-item__wrap" style="display:none;">
                                <div class="el-collapse-item__content" style="padding: 10px;line-height: 32px;">
                                <!--    <label>测序长度: </label>
                                    <input type="number" name="" value="" min="1" onkeyup="checkInt(this)"
                                           style="left: 90px;position: absolute;width: 60px; height: 20px;margin: 3px 0px;">
                                    <label style="left:160px;position:absolute;">(输入大于0的整数)</label>
                                    <br>-->
                                    <select id="select-format" onchange="select_format(this)"  style="width: 160px;" class="el-input__inner el_select" >
                                        <option value ="fna">fna文件</option>
                                        <option value ="fastq">拼接好的fastq文件</option>
                                        <!--<option value="fastq-two">双端fastq文件</option>-->
                                    </select>
                                    <div id="fastq-two-param" style="display: none;">
                                        <fieldset style="margin:0px 20px 10px 30px">
                                            <legend>拼接参数: </legend>
                                            overlap:
                                            <input type="number" name="" value="10" min="1" onkeyup="checkInt(this)"
                                                   style="left: 90px;position: absolute;width: 60px;">

                                            <label style="left: 180px;position: absolute;width: 40px;">filtered_length: </label>
                                            <label style="left: 280px;position: absolute;width: 20px;">min: </label>
                                            <input type="number" name="" value="" min="1" onkeyup="checkInt(this)"
                                                   style="left: 310px;position: absolute;width: 40px;">
                                            <label style="left: 360px;position: absolute;width: 20px;">max: </label>
                                            <input type="number" name="" value="" min="1" onkeyup="checkInt(this)"
                                                   style="left: 390px;position: absolute;width: 40px;">

                                            <br>
                                            N:
                                            <input type="number" name="" value="5" min="1" onkeyup="checkInt(this)"
                                                   style="left: 90px;position: absolute;width: 60px;">

                                            <label style="left: 180px;position: absolute;width: 40px;">average_qscore: </label>
                                            <input type="number" name="" value="20" min="1" onkeyup="checkInt(this)"
                                                   style="left: 280px;position: absolute;width: 50px;">
                                        </fieldset>

                                    </div>
                                    <div style="display: inline-block">
                                        <select id="select-data-list" onchange="select_data_option(this)" style="width:300px;margin-left:20px;" class="el-input__inner el_select" >
                                            <option value ="">(请选择数据)</option>
                                        </select>
                                        <!--<button value="" style="width:100px;margin-left: 20px" onclick="select_data()">选择样品</button>
                                        <label id="select_data_file_name">(已选择的样品)</label>
                                        <div id="data_sample_list" style="position: absolute; float: right;
                                                line-height: 24px;
                                                margin-left: 16px;
                                                background-color: white;
                                                padding: 10px 0px;
                                                min-width: 100px;
                                                border: 1px solid #e0e0e0;
                                                border-radius: 3px; display: none">
                                            <li id="data_sample_list_template" class="select_file_item"  style="display: none" onclick="click_sample_list(this)"> template </li>
                                        </div>-->

                                       <!-- <select onchange="select_data_file(this)"  style="min-width: 100px;" class="el-input__inner" >
                                            <option value ="fna">fna文件</option>
                                            <option value ="fastq">拼接好的fastq文件</option>
                                            &lt;!&ndash;<option value="fastq-two">双端fastq文件</option>&ndash;&gt;
                                        </select>
                                        <label id="select_data_file_name">(已选择的样品)</label>-->
                                    </div>

                                    <div id="data_sample_files" style="margin: 14px 0px; display: none">
                                        <div id="data_sample_files_template" style="display: none">
                                            <input class="file_checkbox" type="checkbox">
                                            <input class="file_alias el-input__inner" type="text" autocomplete="off" value="M01" style="margin:0px 20px 0px 10px; width: 125px;">
                                            <input class="file_path el-input__inner" type="text" autocomplete="off" value="src/eee/" style="width: 300px;">
                                            <button value="" onclick="this.parentElement.remove();">删除</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--参数项 3-->
                        <div class="el-collapse-item">
                            <div role="tab" >
                                <div role="button" id="el-collapse-head-p3" tabindex="0" class="el-collapse-item__header" onclick="onclick_header('p3')">
                                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                                    参数3：样品分组
                                </div>
                            </div>
                            <div role="tabpanel"  class="el-collapse-item__wrap" style="display:none;">
                                <div class="el-collapse-item__content" style="padding: 10px;">
                                    <div class="sample-grouping">
                                        <!--
                                        <div class="el-row">
                                            <div class="el-col el-col-12">
                                                <div  style="margin-bottom: 5px;">
                                                    <input type="radio" name="param2-group" id="group-0" value="no-group"><label for="group-0">分组</label>
                                                    <input type="radio" name="param2-group" id="group-1" value="do-group"><label for="group-1">不分组</label>
                                                </div>
                                            </div>
                                            <div class="el-col el-col-12" style="float: none; display: inline-block;">
                                                <button type="button" class="el-button">
                                                    <span>
                                                                <i  class="fa fa-download">
                                                                </i>
                                                                下载示例分组文件
                                                            </span>
                                                </button>
                                                <input type="file" name="file" accept="txt" class="el-upload__input" style="display: none;">
                                                <button type="button" class="el-button">
                                                    <span>
                                                                <i  class="fa fa-download">
                                                                </i>
                                                                下载示例分组文件
                                                            </span>
                                                </button>
                                            </div>
                                        </div>
                                        -->
                                        <div class="grouping-pool el-row"
                                             style="position: relative;margin-bottom: 25px;margin-top: 15px;">
                                            <div class="el-tabs el-tabs--top el-tabs--border-card"
                                                 style="box-shadow: none;background: #fff;border: 1px solid #dcdfe6;">
                                                <!-- <div class="el-tabs__header is-top" style="background-color: #eee;border-bottom: 1px solid #ccc;">

                                                     <span tabindex="0" class="el-tabs__new-tab"
                                                           style="float: right;
                                                                 border: 1px solid #129dd6;
                                                             height: 32px;
                                                             width: 100px;
                                                             line-height: 32px;
                                                             margin: 4px 5px 0 1px;
                                                             border-radius: 3px;
                                                             text-align: center;
                                                             font-size: 12px;
                                                             background-color: #129dd6;
                                                             color: #fff;
                                                             cursor: pointer;
                                                             transition: all .15s;">
                                                             <i class="el-icon-plus"></i>
                                                             添加分组类型
                                                     </span>
                                                     <div class="el-tabs__nav-wrap is-top"
                                                          style="overflow: hidden;margin-bottom: -1px;position: relative;">
                                                         <div class="el-tabs__nav-scroll" style="overflow: hidden;">
                                                             <div role="tablist" class="el-tabs__nav is-top"
                                                                  style="transform: translateX(0px);
                                                                   white-space: nowrap;position: relative;
                                                                   transition: transform .3s,-webkit-transform .3s;
                                                                     float: left;
                                                                     z-index: 2;
                                                                     display: block;">
                                                                 <div id="tab-1" aria-controls="pane-1" role="tab" aria-selected="true" tabindex="0" class="el-tabs__item is-top is-active"
                                                                      style="color: #333;background-color: #fff;
                                                                         /*border-right-color: #dcdfe6;
                                                                         border-left-color: #dcdfe6;
                                                                         border-bottom-color: transparent;
                                                                         border-top-color: transparent;
                                                                         */
                                                                         transition: all .3s cubic-bezier(.645,.045,.355,1);
                                                                         border-: 1px solid transparent;
                                                                         margin: -1px -1px 0;
                                                                         cursor: pointer;
                                                                         padding: 0 20px;
                                                                         height: 40px;
                                                                         box-sizing: border-box;
                                                                         line-height: 40px;
                                                                         display: inline-block;
                                                                         list-style: none;
                                                                         font-size: 14px;
                                                                         font-weight: 500;
                                                                         position: relative;">
                                                                     <div  class="tab-label" style="display: inline-block;">
                                                                         <label  >分组类型：</label>
                                                                         <div  class="el-input"
                                                                              style="position:relative;font-size: 14px;display: inline-block;width: 60px;">
                                                                             <input type="text" autocomplete="off" maxlength="9" class="el-input__inner">
                                                                         </div>
                                                                     </div>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>-->
                                                <div class="el-tabs__content"
                                                     style="overflow: hidden; position: relative; padding: 15px;">
                                                    <div  role="tabpanel" id="pane-1" aria-labelledby="tab-1" class="el-tab-pane">
                                                        <div class="panel-body transfer" style="padding: 20px;">
                                                            <div  class="el-row">
                                                                <div  class="el-col el-col-12">
                                                                    <div  class="panel-header" style="margin-bottom: 5px;">
                                                                        <span>样品池</span>
                                                                    </div>
                                                                </div>
                                                                <div class="el-col el-col-12">
                                                                    <div  class="panel-header" style="margin-bottom: 5px;">
                                                                        <span>分组池</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="el-row">
                                                                <div  class="el-col el-col-12">
                                                                    <div  class="panel-arrow--left"
                                                                          style="position: absolute;
                                                                            top: 50%;
                                                                            left: 50%;
                                                                            margin: -7px;
                                                                            opacity: .3;">
                                                                        <i  class="el-icon-d-arrow-left"></i>
                                                                    </div>
                                                                    <div id="sample_pool" class="panel-body__content">
                                                                        <label id="sample_item_template" class="group_sample_item" style="display: none" onclick="click_sample_item(this)"> template </label>
                                                                    </div>
                                                                </div>
                                                                <div class="el-col el-col-12">
                                                                    <div class="panel-body__content">
                                                                        <div id="group_pool" class="group_list">
                                                                            <div id="group_item_template" class="group_item" style="display: none">
                                                                                <div class="group_item_heard">
                                                                                    <input type="radio" class="group_item_radio" name="group_item_radio" checked style="margin-top: 12px;">
                                                                                    <input type="text" value="" class="group_name el-input__inner" style="width: 80px">
                                                                                </div>
                                                                                <div id="group_item_array" class="group_item_array" >
                                                                                    <div id="group_sample_item_template" class="group_sample_item" style="display: none">
                                                                                        <label class="sample_name">inner-sample-template</label>
                                                                                        <input type="button" value="x" style="float:right; right: 10px" onclick="click_del_group_item(this)" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div id="group0" class="group_item">
                                                                                <div class="group_item_heard">
                                                                                    <input type="radio" class="group_item_radio" name="group_item_radio" checked  style="margin-top: 12px;">
                                                                                    <input type="text" value="" class="group_name el-input__inner" style="width: 80px">
                                                                                </div>
                                                                                <div class="group_item_array" >

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div  class="el-row">
                                                                <div class="el-col el-col-12">
                                                                    <div class="panel-footer"
                                                                         style="padding-left: 10px; height: 43px;line-height: 40px;background-color: #f3f3f4;">
                                                                        <button type="button" class="el-button el-button--default el-button--mini" onclick="click_select_all()"><!----><!---->
                                                                            <span>全选</span>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <div class="el-col el-col-12">
                                                                    <div  class="panel-footer"
                                                                          style="padding-left: 10px;height: 43px;line-height: 40px; background-color: #f3f3f4;">
                                                                        <div  class="el-button-group">
                                                                            <button   type="button" class="el-button el-button--default el-button--mini" onclick="click_new_group()"><!---->
                                                                                <i class="el-icon-plus"></i>
                                                                                <span>添加分组</span>
                                                                            </button>
                                                                            <button  type="button" class="el-button el-button--default el-button--mini" onclick="click_remove_group()"><!---->
                                                                                <i class="el-icon-minus"></i>
                                                                                <span>删除分组</span>
                                                                            </button>
                                                                            <button  type="button" class="el-button el-button--default el-button--mini" onclick="click_to_default()"><!----><!---->
                                                                                <span>
                                                                                            <i data-v-7f670df2="" class="fa fa-mail-reply-all"></i>
                                                                                            恢复默认
                                                                                        </span>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div  class="el-row" style="margin-top: 5px; display: none;">
                                                    <span  class="errorInfo">
                                                        <i class="fa fa-times-circle"></i>
                                                    </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--参数项 4-->
                        <div class="el-collapse-item">
                            <div role="tab" >
                                <div role="button" id="el-collapse-head-p4" tabindex="0" class="el-collapse-item__header" onclick="onclick_header('p4')">
                                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                                    参数4：聚类参数
                                </div>
                            </div>
                            <div role="tabpanel"  class="el-collapse-item__wrap" style="display:none;">
                                <div class="el-collapse-item__content" style="padding: 10px;line-height: 34px;">
                                    <label>OTU聚类相似度: </label>
                                    <input id="otu_similarity" type="number" name="" value="0.97" min="0.0" max="1.0" step="0.01"  onkeyup="checkNumber01(this)" placeholder="输入0-1之间的数值"
                                           class="el-input__inner" style="left: 180px;position: absolute;width: 140px;padding-right:0px">
                                    <!--<label style="left:220px;position:absolute;">(输入0-1之间的数值)</label>-->
                                    <br>
                                    <label>OTU最低深度:</label>
                                    <!--<label style="left:220px;position:absolute;">(输入大于0的整数)</label>-->
                                    <input id="otu_xxx" type="number" name="" value="2" min="1" onkeyup="checkInt(this)" placeholder="输入大于0的整数"
                                           class="el-input__inner" style="left: 180px;position: absolute;width: 140px;padding-right:0px">
                                    <br>
                                    <label>序列反比OTU相似度:</label>
                                    <input id="otu_xxx1" type="number" name="" value="0.76" min="0.0" max="1.0" step="0.01" onkeyup="checkNumber01(this)" placeholder="输入0-1之间的数值"
                                          class="el-input__inner" style="left: 180px;position: absolute;width: 140px;padding-right:0px">
                                    <!--<label style="left:220px;position:absolute;">(输入0-1之间的数值)</label>-->
                                </div>
                            </div>
                        </div>
                        <!--参数项 5-->
                        <div class="el-collapse-item">
                            <div role="tab" >
                                <div role="button" id="el-collapse-head-p5" tabindex="0" class="el-collapse-item__header" onclick="onclick_header('p5')">
                                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                                    参数5：OTU物种分类
                                </div>
                            </div>
                            <div role="tabpanel"  class="el-collapse-item__wrap" style="display:none;">
                                <div class="el-collapse-item__content" style="padding: 10px;">
                                    <label>OTU物种分类：</label>
                                   <!-- <select>
                                        <option value ="silva132-16s">silva132/16s</option>
                                        <option value ="silva132-18s">silva132/18s</option>
                                        <option value="silva132-archaea">silva132/archaea</option>
                                        <option value="unite8.0-ITS_fungi">unite8.0/ITS_fungi</option>
                                    </select>-->
                                    <select id="otu_select" style="width: 160px" class="el-input__inner el_select" onchange="select_otu(this)">
                                        <option value ="16s_silva132(latest)">16s_silva132(latest)</option>
                                        <option value ="16S_silva128">16S_silva128</option>
                                        <option value="18S_silva132(latest)">18S_silva132(latest)</option>
                                        <option value="18S_silva128">18S_silva128</option>
                                        <option value="ITS_unite7.2(latest)">ITS_unite7.2(latest)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                        <!--保存参数，提交-->
                    <div>
                        <div class="el-col-12" >
                            <button  type="button" class="el-button" style="width:200px;height: 30px;" onclick="onclick_submit()"><!----><!---->
                                <span>提交</span>
                            </button>
                        </div>

                        <div class="el-col-12">
                            <!-- <label role="checkbox"  class="el-checkbox is-checked" style="float:right">
                                <span aria-checked="mixed" class="el-checkbox__input is-checked">
                                    <span class="el-checkbox__inner">
                                    </span>
                                    <input type="checkbox"class="el-checkbox__original" value="">
                                </span>
                                <span class="el-checkbox__label">保存分析参数&lt;!&ndash;&ndash;&gt;
                                </span>
                            </label>-->

                            <div class="nameVal el-input el-input--small"><!---->
                                <input type="text" autocomplete="off" placeholder="请输入要保存的分析参数名称" maxlength="50" class="el-input__inner"
                                style="float:right; width: 300px">
                                <!----><!----><!---->
                            </div> <!---->

                            <button type="button" class="el-button" style="float:right;width:140px;height: 30px;"><!----><!---->
                                <span>保存参数</span>
                            </button>
                        </div>

                       <!-- <div class="el-col-12" >
                            <button  type="button" class="el-button" style="float: right; width:200px;height: 30px;margin-top: 10px;">&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;
                                <span>提交</span>
                            </button>
                        </div>-->

                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>